<template>
	<view class="userinfo">
		<!--头像 + 背景-->
		<view class="user-section" :class="'bg-' + themeColor.name">
			<image class="bg" :src="profileInfo.header"></image>
			<!--#ifdef H5-->
			<!--h5直接上传头像-->
			<view class="portrait-box" @tap="uploadImage">
				<image class="portrait" :src="profileInfo.header"></image>
			</view>
			<!-- #endif -->
			<!--#ifndef H5-->
			<!--非h5裁剪头像上传-->
			<view class="portrait-box">
				<avatar canRotate="false" selWidth="200px" selHeight="400upx" @upload="handleUploadFile" :avatarSrc="profileInfo.header"
				 avatarStyle="width: 200upx; height: 200upx; border-radius: 100%; border: 6upx solid #fff;">
				</avatar>
			</view>
			<!-- #endif -->
		</view>
		<view class="input-content">

			<view class="input-item">
				<text class="tit">姓　名</text>
				<input type="text" v-model="profileInfo.name" placeholder="请输入您的姓名" />
			</view>
			<view class="input-item">
				<text class="tit">性　别</text>
				<radio-group @change="handleGenderChange">
					<label class="gender-item" v-for="(item, index) in genders" :key="index">
						<radio class="gender-item-radio" :color="themeColor.color" :value="item.value" :checked="item.value === profileInfo.gender" />
						<text class="gender-item-text">{{ item.name }}</text>
					</label>
				</radio-group>
			</view>

			<!-- <view class="input-item">
				<text class="tit">生　日</text>
				<input type="text" v-model="profileInfo.birthday" placeholder="请输入您的出生日期" />
			</view> -->
			
			<view class="input-item">
				<view class="section" style="width: 100%;">
				  <picker mode="date" :value="profileInfo.birthday" start="1990-01-01" end="2030-12-31" @change="bindDateChange" style="width: 100%;">
				    <view class="picker" style="display: flex;width: 100%;justify-content: flex-start;">
						<view class="tit" style="padding-top: 20rpx;">生 日</view>
						<view style="padding-top: 20rpx;">{{profileInfo.birthday}}</view>
					</view>
				  </picker>
				</view>
			</view>
			
			<view class="input-item">
				<text class="tit">邮　箱</text>
				<input v-model="profileInfo.email" placeholder="请输入您的邮箱" />
			</view>
			<view class="input-item">
				<text class="tit">手机号</text>
				<input type="number" v-model="profileInfo.phone" placeholder="请输入手机号码" />
			</view>
			<button class="confirm-btn" :class="'bg-' + themeColor.name" :disabled="btnLoading" :loading="btnLoading" @tap="toUpdateInfo">
				修改资料
			</button>
		</view>

	</view>
</template>

<script>
	import avatar from '@/components/oa-avatar/oa-avatar';
	import moment from '@/common/moment';
	import rfPickRegions from '@/components/oa-pick-regions';
	import {config} from '../../../config/api.config.js';
	export default {
		components: {
			avatar,
			rfPickRegions
		},
		data() {
			return {
				// profileInfo: {
				// 	"username": "18986869999",
				// 	"realname": "古月",
				// 	"gender": "1",
				// 	"qq": "21931118",
				// 	"email": "21931118@qq.com",
				// 	"birthday": "1999-09-09",
				// 	"mobile": "18986869999"
				// },
				profileInfo: {}, //个人具体信息
				genders: [
					{
						value: '男',
						name: '男'
					},
					{
						value: '女',
						name: '女'
					}
				],
				date: moment().format('YYYY-MM-DD'),
				token: null,
				loading: true,
				headImg: this.$mAssetsPath.headImg,
				userBg: this.$mAssetsPath.userBg,
				btnLoading: false
			};
		},
		onShow() {
			this.profileInfo = JSON.parse(wx.getStorageSync('user'));
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.themeColor.color,
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
		},
		onLoad() {
			// this.initData();
		},
		methods: {
			// 获取选择的地区
			handleGetRegions(e) {
				this.addressData.province_id = e.province_id;
				this.addressData.city_id = e.city_id;
				this.addressData.area_id = e.area_id;
			},

			// 上传头像
			uploadImage() {
				// 从相册选择图片
				console.log('啦啦啦啦啦');
				const _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {
						console.log(res.tempFilePaths);
						_this.handleUploadFile(res.tempFilePaths);
					}
				});
			},
			// 上传头像
			handleUploadFile(data) {
				this.$mHelper.toast('头像上传中...');
				console.log('在这上传', data);
				// wx.uploadFile({
				// 	url: 'http://121.36.218.32:9887/clouddocument/header/upload',
				// 	filePath: data.avatar.imgSrc,
				// 	name: 'image',
				// 	formData: {
				// 		'eid': this.profileInfo.id,
				// 		'header': data.avatar.imgSrc
				// 	},
				// 	success(resp) {
				// 		console.log(resp);
				// 	}
				// })
				
				// const headers = {
				// 	authentication: wx.getStorageSync('tokenStr')
				// };
				// wx.request({
				// 	url: 'http://121.36.218.32:9887/clouddocument/header/upload',
				// 	method: 'POST',
				// 	data: {
				// 		'eid': this.profileInfo.id,
				// 		'header': data.avatar.imgSrc
				// 	},
				// 	header: {
				// 		'authentication': wx.getStorageSync('tokenStr'),
				// 		// 'Content-Type': 'application/x-www-form-urlencoded'
				// 		'Content-Type': 'multipart/form-data'
						
				// 	},
				// 	success(resp) {
				// 		console.log(resp);
				// 	}
				// })
				
				
			},
			// 监听日期更改
			bindDateChange(e) {
				this.profileInfo.birthday = e.target.value;
			},
			// 监听性别更改
			handleGenderChange(e) {
				this.profileInfo.gender = e.detail.value;
			},

			// 更新用户信息
			async toUpdateInfo() {
				const headers = {
					authentication: wx.getStorageSync('tokenStr')
				};
				var that = this
				// wx.request({
				// 	url: 'http://121.36.218.32:9887/clouddocument/admin/emp',
				// 	method: 'put',
				// 	data: this.profileInfo,
				// 	header: headers,
				// 	success(resp) {
				// 		wx.request({
				// 			url: `http://121.36.218.32:9887/clouddocument/admin/emp/?currentPage=1&size=1&name=${that.profileInfo.name}`,
				// 			method: 'get',
				// 			header: headers,
				// 			success(resp) {
				// 				// wx.setStorageSync('user', JSON.stringify(resp.data.data));
				// 				// wx.navigateBack({
				// 				// 	url: '/pages/profile/profile'
				// 				// })
				// 				wx.clearStorageSync();
				// 				wx.reLaunch({
				// 					url: '/pages/public/login'
				// 				})
				// 				this.$forceUpdate();
				// 			}
				// 		})
				// 	}
					
				// })
				wx.request({
					url: `${config.host}/admin/emp`,
					method: 'PUT',
					data: this.profileInfo,
					header: {
						'authentication': config.authentication,
					},
					success(resp) {
						wx.request({
							url: `${config.host}/admin/emp/?currentPage=1&size=1&name=${that.profileInfo.name}`,
							method: 'get',
							header: headers,
							success(resp) {
								wx.clearStorageSync();
								wx.reLaunch({
									url: '/pages/public/login'
								})
							}
						})
					}
				})
				
				this.$mHelper.toast('恭喜您, 资料修改成功!');
			},

		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: $color-white;
	}

	.userinfo {
		.user-section {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 320upx;
			padding: 40upx 30upx 0;
			overflow: hidden;
			position: relative;

			.bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 100vw;
				opacity: 0.84;
			}

			.portrait-box {
				clear: both;
				z-index: 2;
			}

			.portrait {
				position: relative;
				width: 200upx;
				height: 200upx;
				border-radius: 50%;
				border: 6upx solid #fff;
			}

			.yticon {
				position: absolute;
				line-height: 1;
				z-index: 5;
				font-size: 48upx;
				color: #fff;
				padding: 4upx 6upx;
				border-radius: 6upx;
				background: rgba(0, 0, 0, 0.4);
			}

			.pt-upload-btn {
				right: 0;
				bottom: 10upx;
			}

			.bg-upload-btn {
				right: 20upx;
				bottom: 16upx;
			}
		}

		.input-content {
			padding: 40upx 60upx;

			.input-item {
				display: flex;
				padding: 0 30upx;
				background: $page-color-light;
				height: 80upx;
				line-height: 80upx;
				border-radius: 4px;
				margin-bottom: 30upx;

				&:last-child {
					margin-bottom: 0;
				}

				.tit {
					width: 100upx;
					font-size: $font-sm + 2upx;
					color: $font-color-base;
				}

				input {
					width: calc(100% - 100upx);
					height: 80upx;
					line-height: 80upx;
					font-size: $font-base + 2upx;
					color: $font-color-dark;
				}

				.date {
					height: 80upx;
					line-height: 80upx;
					font-size: $font-base + 2upx;
					color: $font-color-dark;
				}

				.gender-item {
					margin-right: 20upx;

					.gender-item-text {
						padding-left: 10upx;
					}

					radio .wx-radio-input.wx-radio-input-checked {
						background: $uni-color-primary;
						border-color: $uni-color-primary;
					}
				}
			}
		}
	}
</style>
